<template>
  <div class="column">
     <div class="boxTitle">
     按年龄段
    </div>
     <div id="nldChart5" style="width:100%;height:100%;display:block;"></div>
  </div>
</template>

<script>
export default {
  name: 'nianlingduan',
  data () {
    return {
      
    }
  },
    mounted(){
    this.drawLine();
  },
  methods:{
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('nldChart5'))

        var option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['18以下', '18-35', '35-45', '45-60', '60以上'],
         axisLabel: {
            textStyle: {
                color: "#58dbff"
            }
        }
    },
     yAxis: [{
        type: "value",
        name: '单位：人',
        axisLabel: {
            textStyle: {
                color: "#58dbff"
            }
        },
        nameTextStyle: {
            color: "#58dbff",
            fontSize: 12,
            lineHeight: 40
        },
        splitLine: {
            lineStyle: {
                type: "dashed",
                color: "#2b4fa2"
            }
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        }
    }],
    series: [{
        data: [154, 932, 901, 934, 211],
        type: 'line',
        areaStyle: {},
        itemStyle: {
                    color: {
                        type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#14b1fd' // 0%处的颜色为红色
                        }, {
                            offset: 1,
                            color: 'rgba(20,177,253,0.2)' // 100%处的颜色为蓝
                        }]
                    }
                }
    }]
};

        // 绘制图表
        myChart.setOption(option);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  div{
    
  }
</style>
